<template>
	<view class="container">
		<view class="form-box">
			<view class="form-title">用户注册</view>
			<input v-model="form.username" placeholder="请输入用户名" class="input" />
			<input v-model="form.password" type="password" placeholder="请输入密码" class="input" />
			<input v-model="form.confirm" type="password" placeholder="确认密码" class="input" />
			<button class="register-btn" @click="register">注 册</button>
		</view>
	</view>
</template>


<script setup>
	import {
		ref
	} from 'vue'

	const form = ref({
		username: '',
		password: '',
		confirm: ''
	})

	const register = async () => {
		if (form.value.password !== form.value.confirm) {
			return uni.showToast({
				title: '两次密码不一致',
				icon: 'none'
			})
		}
		const res = await uni.request({
			url: 'https://api.xxx.com/register',
			method: 'POST',
			data: form.value
		})
		if (res.data.code === 200) {
			uni.showToast({
				title: '注册成功',
				icon: 'success'
			})
			setTimeout(() => uni.redirectTo({
				url: '/pages/login'
			}), 1000)
		} else {
			uni.showToast({
				title: res.data.message,
				icon: 'none'
			})
		}
	}
</script>


<style scoped>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background: linear-gradient(to bottom right, #e6f7ff, #ffffff);
		padding: 40rpx;
		box-sizing: border-box;
	}

	.form-box {
		width: 100%;
		max-width: 600rpx;
		background-color: #fff;
		padding: 60rpx 40rpx;
		border-radius: 24rpx;
		box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.1);
	}

	.form-title {
		text-align: center;
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
		color: #333;
	}

	.input {
		width: 100%;
		padding: 40rpx;
		margin-bottom: 32rpx;
		border: 1rpx solid #ccc;
		border-radius: 16rpx;
		font-size: 30rpx;
		background-color: #f9f9f9;
		box-sizing: border-box;
		transition: all 0.3s ease;
	}

	.input:focus {
		border-color: #1890ff;
		background-color: #fff;
		outline: none;
	}

	.register-btn {
		width: 100%;
		padding: 20rpx 0;
		font-size: 32rpx;
		color: #fff;
		background: linear-gradient(to right, #36d1dc, #5b86e5);
		border: none;
		border-radius: 50rpx;
		box-shadow: 0 8rpx 20rpx rgba(91, 134, 229, 0.3);
		transition: all 0.2s ease-in-out;
	}

	.register-btn:active {
		transform: scale(0.97);
		opacity: 0.9;
	}
</style>